<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Angular学习笔记</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a routerLink="form/template">表单示例</a></li>
        <li><a routerLink="jsutils/time-test">时间工具类</a></li>
        <li><a routerLink="jsutils/array-test">数组工具类</a></li>
        <li><a routerLink="form/reactive">响应式表单示例</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>
<div class="container-fluid"><div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <h2>网页工具</h2>
    <ul class="nav nav-sidebar">
      <li><a routerLink="webpage-tool/tool01">json转实体</a></li>
      <li><a routerLink="webpage-tool/tool02">html转义</a></li>
      <li><a routerLink="webpage-tool/tool03">json转实体</a></li>
      <li ><a routerLink="webpage-tool/tool03sql">sql转实体</a></li>
    </ul>
    <h2>api</h2>
    <ul class="nav nav-sidebar">
      <li><a routerLink="home">首页</a></li>
      <li><a routerLink="layout">layout</a></li>
      <li><a target="_blank" href="https://www.npmjs.com/package/great-jsutils">数组工具类链接</a></li>
      <li><a target="_blank" href="https://www.npmjs.com/package/great-ngform">表单工具类链接</a></li>
    </ul>
    <h2>工具类</h2>
    <ul class="nav nav-sidebar">
      <li><a routerLink="jsutils/time-test">时间工具类</a></li>
      <li><a routerLink="jsutils/array-test">数组工具类</a></li>
      <li><a routerLink="jsutils/array-test02">TreeJson格式化2</a></li>
      <li><a routerLink="jsutils/array-test03">TreeJson格式化3</a></li>
    </ul>
    <h2>表单校验</h2>
    <ul class="nav nav-sidebar">
      <li><a routerLink="form/template">模板驱动表单示例</a></li>
      <li><a routerLink="form/template01">模板驱动表单示例01</a></li>
      <li><a routerLink="form/reactive">响应式表单示例</a></li>
      <li><a routerLink="form/reactive01">响应式表单示例01</a></li>
      <li><a routerLink="form/byte-length">字节长度验证</a></li>
      <li><a routerLink="form/great-async">异步校验</a></li>
      <li><a routerLink="form/regexp">正则校验</a></li>
    </ul>
    <ul class="nav nav-sidebar">
      <li><a routerLink="orders/order-list">order-list</a></li>
    </ul>
    <h2>布局</h2>
    <ul class="nav nav-sidebar">
      <li><a routerLink="layout/layout01">layout01</a></li>
      <li><a routerLink="layout/layout02">layout02</a></li>
      <li><a routerLink="layout/layout03">layout03</a></li>
      <li><a routerLink="layout/layout04">layout04</a></li>
    </ul>
  </div>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <router-outlet></router-outlet>
  </div>
</div>
</div>
